<template>
  <div
    style="
      height: 100%;
      width: 100%;
      box-sizing: border-box;
      position: relative;
    "
  >
    <div
      style="
        background: #192c55;
        color: white;
        width: 100%;
        display: flex;
        align-items: center;
        height: 10%;
        border: 1px solid;
        box-sizing: border-box;
        text-align: center;
      "
    >
      <p style="width: 15%">序号</p>
      <p style="width: 50%">公司名称</p>
      <p style="width: 35%">中标金额</p>
    </div>
    <div style="height: 90%" v-if="tableData.length > 0">
      <div
        class="cellstyle"
        v-for="(item, index) in tableData"
        :key="index"
        :class="index % 2 != 0 ? 'cellstyleeven' : ''"
        @click="kspclistclickitem(item.supplierid)"
      >
        <p style="width: 15%">{{ (currentPage - 1) * 10 + index + 1 }}</p>
        <p style="width: 50%" class="textchuli">{{ item.suppliername }}</p>
        <p style="width: 35%">{{ item.totalprice }}</p>
      </div>
    </div>
    <div
      style="
        height: 90%;
        display: flex;
        align-items: center;
        justify-content: space-around;
      "
      v-else
    >
      暂无数据
    </div>

    <div
      v-if="kspcmiddlevisiable"
      style="width: 100%; height: 100%"
      id="showvisible"
    >
      <Kspcxiaodialog :modalVisible="kspcmiddlevisiable">
        <template>
          <div class="popup">
            <div class="tag-conter">
              <div class="text" v-if="detailinfo.categoryList != null">
                {{ detailinfo.categoryList[0].categoryname.slice(0, 4) || "-" }}
              </div>
              <div class="text2" v-if="detailinfo.isinner != null">
                {{ detailinfo.isinner == 1 ? "外" : "内" }}
              </div>
            </div>
            <div class="theme">
              <div style="max-width: 90%; display: inline-block">
                <el-tag
                  effect="dark"
                  size="mini"
                  v-if="detailinfo.udfdatajson['udf_fxbirn_8510']"
                  style="
                    background: #009245;
                    max-width: 90%;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    display: inline-block;
                  "
                  :title="detailinfo.udfdatajson['udf_fxbirn_8510']"
                  >{{ detailinfo.udfdatajson["udf_fxbirn_8510"] }}</el-tag
                >
              </div>
              <div style="height: 2rem">
                <p
                  v-if="detailinfo.enterprisename"
                  class="textchuli"
                  style="width: 93%"
                  :title="detailinfo.enterprisename"
                >
                  {{ detailinfo.enterprisename }}
                </p>
              </div>
              <div class="info-xy">
                <div class="lable">统一社会信用代码</div>
                <div class="value">
                  {{ detailinfo.orgnizationcode || "-" }}
                </div>
                <div
                  v-if="detailinfo.orgnizationcode"
                  class="icon"
                  @click="gocopy"
                  v-copy="detailinfo.orgnizationcode"
                >
                  <img src="@/assets/lwfb-fz.png" alt="" />
                </div>
              </div>
              <div class="info-sf">
                <div class="name" v-if="detailinfo.contactperson">
                  {{ detailinfo.contactperson }}
                </div>
                <div class="phone" v-if="detailinfo.phone || detailinfo.mobile">
                  {{ detailinfo.phone || detailinfo.mobile }}
                </div>
                <div class="risk" style="cursor: pointer" @click="waibufenxian">
                  <i
                    class="el-icon-warning"
                    style="
                      margin-right: 0.2rem;
                      font-size: 0.9rem;
                      color: #f15a24;
                    "
                  ></i
                  >外部风险
                </div>
                <div class="name-icon">
                  <img src="@/assets/lwfb-tx.png" alt="" style="" />
                </div>
                <div class="name-phone">
                  <img src="@/assets/lwfb-dh.png" alt="" />
                </div>
              </div>
              <div class="info-fw" style="">
                <div class="title">经营范围</div>
                <div
                  style="
                    height: 100%;
                    overflow: hidden;
                    max-height: 4rem;
                    overflow-y: scroll;
                  "
                  class="scrollbar"
                >
                  <span
                    style="font-size: 0.8rem"
                    :title="detailinfo.primarybusiness"
                    >{{ detailinfo.primarybusiness || "-" }}</span
                  >
                </div>
                <!-- <div
                  style="height: 100%; overflow-y: scroll; font-size: 0.8rem"
                  :title="detailinfo.primarybusiness"
                >
                <p style="font: 0.8rem;">
                  {{ detailinfo.primarybusiness || "-" }}
                </p> 
                </div> -->
              </div>
              <div class="info-from">
                <div class="li">
                  <div class="lable">企业性质</div>
                  <div class="value">{{ detailinfo.kspcqyxz || "-" }}</div>
                </div>
                <div class="li">
                  <div class="lable">企业类型</div>
                  <div class="value">
                    {{
                      detailinfo.typename == 1
                        ? "生产商"
                        : detailinfo.typename == 2
                        ? "经销商/代理商"
                        : "其他" || "-"
                    }}
                  </div>
                </div>
                <div class="li">
                  <div class="lable">法定代表人</div>
                  <div class="value">
                    {{ detailinfo.representative || "-" }}
                  </div>
                </div>
                <div class="li">
                  <div class="lable">注册资金</div>
                  <div class="value">
                    {{
                      detailinfo.registercapital == 0 ||
                      detailinfo.registercapital == null
                        ? "-"
                        : detailinfo.registercapital + "万元" || "-"
                    }}
                  </div>
                </div>

                <div
                  class="li"
                  v-if="
                    detailinfo.extdatajson != null &&
                    detailinfo.extdatajson.bank != undefined
                  "
                >
                  <div class="lable">开户银行</div>
                  <div class="value" :title="detailinfo.extdatajson.bank">
                    {{ detailinfo.extdatajson.bank || "-" }}
                  </div>
                  <div
                    class="icon"
                    @click="gocopy"
                    v-copy="detailinfo.extdatajson.bank"
                  >
                    <img src="@/assets/lwfb-fz.png" alt="" />
                  </div>
                </div>
                <div class="li" v-else>
                  <div class="lable">开户银行</div>
                  <div class="value">-</div>
                  <div class="icon"></div>
                </div>

                <div
                  class="li"
                  v-if="
                    detailinfo.extdatajson != null &&
                    detailinfo.extdatajson.accountname != undefined
                  "
                >
                  <div class="lable">账户名称</div>
                  <div
                    class="value"
                    :title="detailinfo.extdatajson.accountname"
                  >
                    {{ detailinfo.extdatajson.accountname || "-" }}
                  </div>
                  <div
                    class="icon"
                    @click="gocopy"
                    v-copy="detailinfo.extdatajson.accountname"
                  >
                    <img src="@/assets/lwfb-fz.png" alt="" />
                  </div>
                </div>
                <div class="li" v-else>
                  <div class="lable">账户名称</div>
                  <div class="value">-</div>
                  <div class="icon"></div>
                </div>

                <div
                  class="li"
                  v-if="
                    detailinfo.extdatajson != null &&
                    detailinfo.extdatajson.banknumber != undefined
                  "
                >
                  <div class="lable">银行账号</div>
                  <div class="value" :title="detailinfo.extdatajson.banknumber">
                    {{ detailinfo.extdatajson.banknumber || "-" }}
                  </div>
                  <div
                    class="icon"
                    @click="gocopy"
                    v-copy="detailinfo.extdatajson.banknumber"
                  >
                    <img src="@/assets/lwfb-fz.png" alt="" />
                  </div>
                </div>
                <div class="li" v-else>
                  <div class="lable">银行账号</div>
                  <div class="value">-</div>
                  <div class="icon"></div>
                </div>

                <div
                  class="li"
                  v-if="
                    detailinfo.extdatajson != null &&
                    detailinfo.extdatajson.unionpayno != undefined
                  "
                >
                  <div class="lable">联行号</div>
                  <div class="value" :title="detailinfo.extdatajson.unionpayno">
                    {{ detailinfo.extdatajson.unionpayno || "-" }}
                  </div>
                  <div
                    class="icon"
                    @click="gocopy"
                    v-copy="detailinfo.extdatajson.unionpayno"
                  >
                    <img src="@/assets/lwfb-fz.png" alt="" />
                  </div>
                </div>
                <div class="li" v-else>
                  <div class="lable">联行号</div>
                  <div class="value">-</div>
                  <div class="icon"></div>
                </div>

                <div
                  class="li"
                  v-if="
                    detailinfo.extdatajson != null &&
                    detailinfo.extdatajson != null
                  "
                >
                  <div class="lable">币种</div>
                  <div class="value">
                    {{
                      detailinfo.extdatajson.currency == "USB"
                        ? "美元"
                        : detailinfo.extdatajson.currency == "HKD"
                        ? "港币"
                        : detailinfo.extdatajson.currency == "JPY"
                        ? "日元"
                        : "人民币" || "-"
                    }}
                  </div>
                </div>
                <div class="li" v-else>
                  <div class="lable">币种</div>
                  <div class="value">-</div>
                </div>
              </div>
              <div class="info-qy">
                <div
                  class="region"
                  :style="{
                    justifyContent: detailinfo.businessareaname
                      ? 'space-around'
                      : '',
                  }"
                >
                  <div class="lable">经营区域</div>
                  <div
                    style="
                      display: flex;
                      align-items: center;
                      justify-content: space-around;
                      width: calc(100% - 3.2rem);
                    "
                  >
                    <div
                      class="value"
                      :style="{
                        width: detailinfo.businessareaname ? '30%' : '90%',
                      }"
                      :title="detailinfo.businessareaname"
                      v-if="detailinfo.businessareaname"
                    >
                      {{ detailinfo.businessareaname }}
                    </div>
                    <img
                      src="../assets/baisesanjiao.png"
                      style="width: 0.5rem; height: 0.5rem"
                      v-if="detailinfo.businessareaname"
                    />
                    <div
                      class="value"
                      :style="{
                        width:
                          !detailinfo.businessareaname &&
                          detailinfo.provincename
                            ? '90%'
                            : '70%',
                      }"
                      :title="`${detailinfo.provincename}${detailinfo.cityname}${detailinfo.regionname}`"
                    >
                      {{ detailinfo.provincename }}{{ detailinfo.cityname
                      }}{{ detailinfo.regionname }}
                    </div>
                  </div>
                </div>
                <div class="location" v-if="detailinfo.address">
                  <div class="icon">
                    <img src="@/assets/lwfb-dw.png" alt="" />
                  </div>
                  <div class="lie" :title="detailinfo.address">
                    {{ detailinfo.address }}
                  </div>
                </div>
              </div>
              <div class="information">
                <div @click="gengduoxinxi" style="cursor: pointer">
                  <p style="text-decoration: underline">更多信息</p>
                </div>
              </div>
            </div>
          </div>
        </template>
      </Kspcxiaodialog>
    </div>
  </div>
</template>

<script>
import APIS from "@/api/index";
import axios from "axios";
import Kspcxiaodialog from "@/components/kspcxiaodialog.vue";
export default {
  props: {
    tableData: Array,
    currentPage: Number,
    headerlist: Array,
    isactive: Number,
    time: Array,
    loading: Boolean,
  },
  components: { Kspcxiaodialog },
  data() {
    return {
      detailinfo: {},
      kspcmiddlevisiable: false,
    };
  },
  mounted() {},
  methods: {
    gengduoxinxi() {
      var s = [
        `基本信息,/enterprise/simple/v?_m=sm/supplier/mainlib/edit&readonly=true&supplierid=${this.detailinfo.enterpriseid}`,
        `银行信息,/enterprise/simple/v?_m=sm/supplier/bank/sm_bank_info&readonly=true&supplierid=${this.detailinfo.enterpriseid}`,
        `联系人,/enterprise/simple/v?_m=sm/supplier/linkman&readonly=true&supplierid=${this.detailinfo.enterpriseid}`,
        `历史业绩,/enterprise/simple/v?_m=sm/supplier/history&readonly=true&supplierid=${this.detailinfo.enterpriseid}`,
        `证照附件,/enterprise/simple/v?_m=sm/supplier/certificate&readonly=true&supplierid=${this.detailinfo.enterpriseid}`,
        `班组信息,/enterprise/simple/v?_m=sm/supplier/relied_groups&readonly=true&supplierid=${this.detailinfo.enterpriseid}`,
        `考察报告,/enterprise/simple/v?_m=sm/supplier/check/check_records&readonly=true&supplierid=${this.detailinfo.enterpriseid}`,
        `平台合作记录,/enterprise/simple/v?_m=sm/supplier/cooperation&readonly=true&supplierid=${this.detailinfo.enterpriseid}`,
        `退回记录,/enterprise/simple/v?_m=sm/supplier/return_record&supplierid=${this.detailinfo.enterpriseid}`,
        `修改记录,/enterprise/simple/v?_m=sm/supplier/editrecords&readonly=true&supplierid=${this.detailinfo.enterpriseid}`,
        `转库记录,/enterprise/simple/v?_m=sm/supplier/transferlib_record&supplierid=${this.detailinfo.enterpriseid}`,
        `合作单位,/enterprise/simple/v?_m=sm/supplier/platforms&readonly=true&supplierid=${this.detailinfo.enterpriseid}`,
        `评价记录,/enterprise/simple/v?_m=sm/supplier/evalrecords&readonly=true&supplierid=${this.detailinfo.enterpriseid}`,
        `备注信息,/enterprise/simple/v?_m=sm/supplier/comments&readonly=false&supplierid=${this.detailinfo.enterpriseid}`,
        `会员费缴费记录,/enterprise/simple/v?_m=sm/supplier/supp_member_fee_record&supplierid=${this.detailinfo.enterpriseid}`,
        `服务费缴费记录,/enterprise/simple/v?_m=sm/supplier/supp_trade_fee_record&supplierid=${this.detailinfo.enterpriseid}`,
      ];

      let url =
        this.base_url+"/tabs2?tabs=" +
        s
          .map((item) => {
            return (
              encodeURI(item.split(",")[0]) +
              encodeURIComponent("," + item.split(",")[1])
            );
          })
          .join(";");
      window.open(url);
    },
    waibufenxian() {
      this.clickitem(this.detailinfo);
    },
    clickitem(item) {
      // for(var i = 0;i<11;i++){
      this.getlink(item.enterprisename);
      // }
    },
    getlink(name) {
      let data = {
        _: Date.now(),
        keyword: name,
      };
      axios({
        method: "post", //请求方法
        data: data,
        url: "https://srm.cnzgc.com/zjszjj/tyc/cloud-tempest/search/suggest/v3",
      })
        .then((res) => {
          //执行成功后代码处理
          if (res.data.errorCode == 0) {
            this.openlinknew(1, res.data.data[0].id);
          } else {
            this.openlinknew(0);
          }
        })
        .catch((error) => {
          this.openlinknew(0);
        });
    },
    openlinknew(num, id) {
      if (num == 1) {
        window.open(`https://www.tianyancha.com/company/${id}`);
      } else {
        window.open("https://www.tianyancha.com/");
      }
    },

    kspclistclickitem(id) {
      this.getdetail(id);
      // this.showkspc = true;
    },
    getdetail(id) {
      // getEnterprise
      APIS.Kspc.getEnterprise({ id: id })
        .then((res) => {
          APIS.Kspc.propertyList().then((res1) => {
            res1.data.forEach((item) => {
              if (res.data.property == item.diccode) {
                res.data.kspcqyxz = item.dicname;
              }
            });
            console.log(11111111111111);
            this.detailinfo = res.data;
            this.kspcmiddlevisiable = true;
          });
        })
        .catch((err) => {});
    },
    gocopy() {
      this.$message({
        message: "已复制",
        offset: window.screen.height / 2.8,
        duration: 1000,
      });
    },
    closepopup() {
      this.kspcmiddlevisiable = false;
    },
  },
};
</script>

<style scoped lang="scss">
.cellstyle {
  width: 100%;
  display: flex;
  align-items: center;
  height: 9.6%;
  box-sizing: border-box;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 0.8rem;
}
.cellstyleeven {
  background-color: #e4e8f2;
}
.textchuli {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.popup {
  height: 100%;
  position: relative;
  padding: 1.8rem 0 0 3.8rem;
  box-sizing: border-box;
  .tag-conter {
    position: absolute;
    padding-top: 0.2rem;
    left: 0.9rem;
    top: 0.15rem;
    width: 2rem;
    height: 3.7rem;
    background-image: url("@/assets/lwfb-bgi.png");
    background-size: 100% 100%;
    text-align: center;
    color: #fff;
    font-size: 0.6rem;
    .text {
      height: 50%;
      font-size: 0.7rem;
    }
    .text2 {
      height: 50%;
      color: #192c55;
      font-size: 1rem;
      font-weight: bold;
      margin-top: 0.1rem;
      // display: flex;
      // align-items: center;
      // justify-content: space-around;
    }
  }
  .theme {
    color: #192c55;
    height: 100%;
    display: flex;
    flex-direction: column;
    padding-bottom: 6%;
    box-sizing: border-box;
    justify-content: space-around;
    p {
      font-size: 1.1rem;
      margin-top: 0.2rem;
    }
    .info-xy {
      display: flex;
      height: 1.1rem;
      align-items: center;
      margin-top: 0.3rem;
      .lable {
        background-color: #192c55;
        color: #fff;
        padding: 0.2rem 0.7rem;
        font-size: 0.6rem;
      }
      .value {
        margin-left: 0.3rem;
        font-size: 0.9rem;
        font-weight: bold;
      }
      .icon {
        margin-left: 3rem;
        img {
          width: 0.9rem;
          height: 0.8rem;
        }
      }
    }
    .info-sf {
      margin-top: 0.8rem;
      display: flex;
      color: #fff;
      font-size: 0.6rem;
      position: relative;
      .name {
        background-color: #192c55;
        padding: 0rem 0 0rem 3rem;
        display: flex;
        align-items: center;
        height: 1.2rem;
        width: 13%;
        white-space: nowrap; //不支持换行
        overflow: hidden; //隐藏多出部分文字
        text-overflow: ellipsis; //用省略号代替多出部分文字
      }
      .phone {
        padding: 0rem 2rem 0rem 2.3rem;
        background-color: #192c55;
        font-size: 0.8rem;
        font-weight: bold;
        display: flex;
        align-items: center;
        height: 1.2rem;
      }
      .risk {
        color: #192c55;
        font-size: 0.7rem;
        display: flex;
        align-items: center;
        margin-left: 0.5rem;
        font-weight: 600;
      }
      .name-icon {
        position: absolute;
        left: 0.5rem;
        top: -0.4rem;
        width: 1.4rem;
        height: 1.4rem;
        background-color: #fff;
        padding: 0.3rem;
        border: 1px solid #182c56;
        border-radius: 50%;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: space-around;
        img {
          width: 80%;
          height: 80%;
        }
      }
      .name-phone {
        position: absolute;
        left: 5.8rem;
        top: -0.4rem;
        width: 1.4rem;
        height: 1.4rem;
        background-color: #fff;
        padding: 0.3rem;
        border: 1px solid #182c56;
        border-radius: 50%;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: space-around;
        img {
          width: 50%;
          height: 50%;
        }
      }
    }
    .info-fw {
      margin-top: 1.2rem;
      width: 20rem;
      // flex: 1;
      background-image: url("@/assets/lwfb-wb.png");
      background-size: 100% 100%;
      position: relative;
      padding: 0.7rem 0.5rem;
      .title {
        position: absolute;
        left: 1.5rem;
        font-size: 0.75rem;
        top: -0.45rem;
      }
    }
    .info-from {
      font-size: 0.75rem;
      color: #192c55;
      .li:first-child {
        margin-top: 0.7rem;
      }
      .li {
        display: flex;
        height: 1.2rem;
        margin-top: 0.3rem;
        .lable {
          line-height: 1.2rem;
          width: 4rem;
        }
        .value {
          width: 13.5rem;
          border-bottom: 1px solid #192c55;
          white-space: nowrap; //不支持换行
          overflow: hidden; //隐藏多出部分文字
          text-overflow: ellipsis; //用省略号代替多出部分文字
        }
        .icon {
          margin-left: 1rem;
          img {
            width: 0.9rem;
            height: 0.8rem;
          }
        }
      }
    }
    .info-qy {
      .region {
        background-color: #192c55;
        display: flex;
        align-items: center;
        // justify-content: space-around;
        margin-top: 1rem;
        width: 19.5rem;
        padding: 0.2rem 0.4rem;
        .lable {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 2.8rem;
          font-size: 0.6rem;
          text-align: center;
          background-color: #fff;
          border-radius: 0.1rem;
        }
        .value {
          color: #fff;
          // max-width: 30%;
          white-space: nowrap; //不支持换行
          overflow: hidden; //隐藏多出部分文字
          text-overflow: ellipsis; //用省略号代替多出部分文字
          font-size: 0.8rem;
        }
        .value:nth-child(2) {
          margin-left: 1rem;
        }
        .value:nth-child(3) {
          margin-left: 1.5rem;
        }
      }
      .location {
        display: flex;
        font-size: 0.6rem;
        margin-top: 0.4rem;
        .icon {
          width: 0.32rem;
          height: 0.5rem;
          margin: 0 0.2rem 0 0.5rem;
          img {
            width: 100%;
            height: 100%;
          }
        }
        .lie {
          width: 83%;
          white-space: nowrap; //不支持换行
          overflow: hidden; //隐藏多出部分文字
          text-overflow: ellipsis; //用省略号代替多出部分文字
        }
      }
    }
    .information {
      // margin-top: 1rem;
      width: 19.5rem;
      // position: absolute;
      // bottom: 2%;
      div {
        margin: 0 auto;
        width: 4rem;
        text-align: center;
        p {
          font-size: 0.7rem;
        }
      }
    }
  }
}
</style>
